<template>
  <div class="body">
    <div class="left">
      <div id="listTop">
        <a-button @click="createMs">
          <PlusCircleFilled />
          <span style="margin-left: 10px">新建动态</span>
        </a-button>
      </div>
      <a-list
        id="AsList"
        size="large"
        bordered
        :data-source="listData"
        :pagination="pagination"
      >
        <template #renderItem="{ item }">
          <a-list-item id="list" tabindex="1" @click="MsList(item)">
            <span>
              <a-tag color="green" v-if="item.type">已发布</a-tag>
              <a-tag color="blue" v-else>未发布</a-tag>
              <span>{{ item.title }}</span>
            </span>
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                <SettingFilled />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="deleteMs(item)">删除</a-menu-item>
                  <a-sub-menu key="test" title="移动至">
                    <a-menu-item>3rd menu item</a-menu-item>
                    <a-menu-item>4th menu item</a-menu-item>
                  </a-sub-menu>
                </a-menu>
              </template>
            </a-dropdown>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="right">
      <E v-if="MsCheck"></E>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { PlusCircleFilled, SettingFilled } from "@ant-design/icons-vue";
import E from "./wangEditor2.vue";
import { message } from "ant-design-vue";
import {
  putDynamicList,
  getDynamicList,
  deleteDynamic,
  getDynamic,
} from "../../api/create";
import VueEvent from "../../utils/event";
import { formatTime } from "../../utils/date";

export default defineComponent({
  setup() {
    const listData = ref([]);
    const MsCheck = ref(false);
    const createMs = () => {
      let dateNow = formatTime();
      putDynamicList({
        url: "/createD/putDynamicList",
        createtime: dateNow,
        success: (res) => {
          // console.log(res);
          message.info(res.data);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const deleteMs = (item) => {
      // console.log(item.title);s
      deleteDynamic({
        url: "/createD/deleteDynamic",
        did: item.did,
        success: (res) => {
          // console.log(res);
          message.info(res.data);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    getDynamicList({
      success: (res) => {
        // console.log(res);
        if (res.data == "") {
          return;
        } else {
          for (let i = 0; i < res.data.length; i++) {
            listData.value.push({
              did: res.data[i].did,
              title: res.data[i].title,
              type: res.data[i].type,
            });
          }
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    const MsList = (item) => {
      MsCheck.value = true;
      getDynamic({
        url: "/createD/getDynamic",
        did: item.did,
        success: (res) => {
          // console.log(res.data);
          VueEvent.emit("MsBody", {
            did: item.did,
            MsTitle: res.data.title,
            content: res.data.content,
            picList: res.data.picList,
          });
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 7,
      size: "small",
      showQuickJumper: true,
    };

    return {
      listData,
      pagination,
      createMs,
      MsList,
      deleteMs,
      MsCheck,
    };
  },

  components: {
    PlusCircleFilled,
    SettingFilled,
    E,
  },
});
</script>
        
<style scoped>
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 30%;
  max-height: 100%;
}
#listTop {
  height: 50px;
  width: 100%;
  padding: 10px 0 0 10px;
  border: 1px solid rgb(228, 228, 228);
}
#list {
  height: 84px;
  display: flex;
  justify-content: space-between;
}
#list:hover {
  background: #edf9ff;
}
#list:focus {
  background: #edf9ff;
}
.right {
  width: 70%;
  height: auto;
  padding: 20px;
  /* background: rgb(60, 209, 92); */
}
</style>
